const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const path = require('path');
// const webpack = require('webpack');
function resolve(dir) {
  return path.join(__dirname, dir)
  }
const ElementPlus = require("unplugin-element-plus/webpack").default;  // 按需手动引入的时候  每次都需要引入样式,比较麻烦,通过这一操作可以减少该步骤

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  chainWebpack: (config) => {
    // // svg图标解析
    // const svgRule = config.module.rule("svg"); // 默认规则赋值给subRule变量
    // svgRule.uses.clear(); // 清除已有的所有规则
    // svgRule // 添加要替换的规则
    // .use("svg-sprite-loader")
    // .loader("svg-sprite-loader")
    // .options({
    //   symbolId: 'icon-[name]',
    //   include: ["./src/components//svgIcon/icon"] // 特别注意的目录路径
    // })
    config.module
    .rule('svg')
    .exclude.add(resolve('./src/components/svgIcon/icon'))
    .end()
    config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('./src/components/svgIcon/icon'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]'
    })
    .end()
  },
  css: {
    loaderOptions: {
      // sass-loader
      scss: {
        additionalData: `@import "~@/styles/main.scss";`  // additionalData  这里的选名需要根据安装的scss-loader版本的不同来选择,v8-  用data   v8用data  v10+用additionalData
        // prependData: `@import "~@/styles/main.scss";`
      }
    }
  },
  configureWebpack: { // 需要在webpack.config.js中配置的内容
    resolve: {
      extensions: [ ".js", ".json", ".vue"], // 自动添加文件的后缀名
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@views': path.resolve(__dirname, 'src/views'),
        "@u": path.resolve(__dirname, "src/utils"),
        "@a": path.resolve(__dirname, "src/api"),
        "@c": path.resolve(__dirname, "src/components")
      }
    },
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      // ElementPlus()

    ]
  },
  devServer: {
    open: true, // 编译完成后自己打开网页，false的时候不可以打开
    host: '0.0.0.0', // 指定使用的地址,默认为localhose  0.0.0.0代表可以被外界访问
    port: 8080, // 端口号
    proxy: {
      [process.env.VUE_APP_API]: {
        target: process.env.VUE_APP_DEV_TARGET,  // 请求的接口地址
        changeOrigin: true,
        ws: false,
        secure: false,
        pathRewrite: {
          [`${process.env.VUE_APP_API}`]: "", // 匹配到/devApi开头的,替换称为空字符串
        }
      }
    }
  }
});
